<template>
  <div
    class="fire-dialog-content"
    :style="{ left: isPutLaunch ? '15px' : '-500px' }"
  >
    <div class="dialog-top-title">火点最新监测信息</div>
    <div class="table-box">
      <div class="table-header">
        <div style="width: 141px">火点时间</div>
        <div style="width: 87px">过火面积</div>
        <div style="width: 238px">火点地点</div>
      </div>
      <div class="table-content scrollbar">
        <div class="content-col" v-for="(item, index) in rowData" :key="index">
          <div class="col" style="width: 141px" :title="item.observeTime">
            {{ item.observeTime }}
          </div>
          <div class="col" style="width: 87px" :title="item.fireArea">
            {{ item.fireArea }}
          </div>
          <div class="col" style="width: 238px" :title="item.address">
            {{ item.address }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="put-launch"
    @click="putLaunch"
    :style="{
      left: isPutLaunch ? '504px' : '0px'
    }"
  >
    <img
      src="../images/put-launch.png"
      :style="{ transform: `rotate(${isPutLaunch ? '0' : '-180deg'})` }"
      alt=""
    />
  </div>
</template>

<script setup lang="ts">
import apiList from '@/pages/forestry/api/api'
import { fireInsuranceStore } from '@/pages/forestry/store/store'
const fireStore = fireInsuranceStore()
const moduleVisible = computed(() => fireStore.moduleVisible)
const rowData = ref([])
const isPutLaunch = ref(true)
let timerId = ref()
const putLaunch = () => {
  isPutLaunch.value = !isPutLaunch.value
}
const getData = async () => {
  const { data } = await apiList.getNewestFirePointList()
  rowData.value = data
}
watch(
  () => moduleVisible.skModule,
  newV => {
    if (newV) {
      getData()
      timerId.value = setInterval(() => {
        getData()
      }, 15 * 60 * 1000)
    } else {
      clearInterval(timerId.value)
      timerId.value = null
    }
  },
  { immediate: true, deep: true }
)
onMounted(() => {
  getData()
})
onUnmounted(() => {
  clearInterval(timerId.value)
  timerId.value = null
})
</script>

<style scoped lang="scss">
.fire-dialog-content {
  width: 487px;
  height: 60%;
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 10px 1px #00ccff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #00a8ff;
  position: fixed;
  top: 54%;
  transform: translateY(-50%);
  z-index: 10000;
  transition: left 0.5s ease;
  padding: 19px 7px;
  box-sizing: border-box;
  .dialog-top-title {
    width: 367px;
    height: 41px;
    background: url(../images/top-title.png) no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 43px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: 0 0 16px 52px;
  }
  .date-search {
    width: 458px;
    height: 38px;
    margin-left: 6px;
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    .date-box {
      width: 254px;
      height: 38px;
      background: rgba(2, 19, 43, 0.69);
      box-shadow: inset 0px 0px 6px 1px #00b9ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(34, 249, 255, 0.23);
    }
    .search-box {
      width: 192px;
      height: 38px;
      background: rgba(2, 19, 43, 0.69);
      box-shadow: inset 0px 0px 6px 1px #00b9ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(34, 249, 255, 0.23);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
  }
}
.put-launch {
  width: 30px;
  height: 50px;
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 14px 1px #00ccff;
  border-radius: 0px 10px 10px 0px;
  border: 1px solid #00a8ff;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.5s ease;
  img {
    width: 21px;
    height: 15px;
  }
}
.table-box {
  width: 100%;
  height: calc(100% - 60px);
  margin-bottom: 18px;
  .table-header {
    display: flex;
    justify-content: flex-start;
    div {
      height: 36px;
      margin-right: 2px;
      font-weight: 400;
      font-size: 14px;
      color: #96adc5;
      line-height: 36px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      background: url(../images/headerImg.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .table-content {
    width: 100%;
    height: calc(100% - 36px);
    overflow-y: auto;
    .content-col {
      width: 100%;
      height: 36px;
      display: flex;
      justify-content: flex-start;
      .col {
        height: 36px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
        font-style: normal;
        white-space: nowrap; /* 防止换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
    }
    .content-col:nth-child(2n) {
      background: url(../images/back.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
.fileDownload {
  width: 100%;
  height: 54px;
  background: url(../images/file-bag.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  div:first-child {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 0px;
    text-align: center;
    font-style: normal;
    img {
      width: 39px;
      height: 39px;
      margin-right: 17px;
      margin-left: 26px;
    }
  }
  div:last-child {
    width: 108px;
    height: 36px;
    background: url(../images/echartsActive.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 18px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
    font-style: normal;
    cursor: pointer;
  }
}
</style>
<style>
.date-box .el-date-editor.el-input,
.date-box .el-date-editor.el-input__wrapper {
  width: 92%;
  height: 100%;
}
.date-box .el-range-separator {
  color: #dde7ee;
}
.date-box .el-range-input {
  color: #fff;
}
.el-input__inner {
  color: #ffffff;
}
</style>
